<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Column page floats</title>
  <style>
    @page {
      size: 620px;
      margin: 10px;
    }
    :root {
      writing-mode: vertical-rl;
      column-count: 2;
      font-family: Arial, sans-serif;
      font-size: 16px;
      line-height: 20px;
      widows: 1;
      orphans: 1;
    }
    body {
      margin: 8px;
    }
    p {
      background: rgba(100, 100, 100, 0.2);
      border: blue dashed;
    }
    .float {
      float-reference: column;
      background: rgba(100, 100, 255, 0.2);
    }
    .top {
      float: block-start;
      float: column-top;
      -ah-float: top column;
    }
    .bottom {
      float: block-end;
      float: column-bottom;
      -ah-float: bottom column;
    }
  </style>
</head>
<body>
<p>(1) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<div class="float bottom">
  (a) Background of page floats is lightblue. This is a bottom float. This is a bottom float. This is a bottom float. This is a bottom float. This is a bottom float. This is a bottom float. This is a bottom float. This is a bottom float. This is a bottom float.
</div>
<div class="float top">
  (b) Background of page floats is lightblue. This is a top float. This is a top float. This is a top float. This is a top float. This is a top float. This is a top float. This is a top float. This is a top float. This is a top float. This is a top float. This is a top float.
</div>
<p>(2) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<p>(3) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<div class="float bottom">
  (c) Background of page floats is lightblue. This is a bottom float. This is a bottom float. This is a bottom float. This is a bottom float. This is a bottom float. This is a bottom float. This is a bottom float. This is a bottom float. This is a bottom float.
</div>
<p>(4) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<div class="float top">
  (d) Background of page floats is lightblue. This is a top float. This is a top float. This is a top float. This is a top float. This is a top float. This is a top float. This is a top float. This is a top float. This is a top float. This is a top float. This is a top float.
</div>
<p>(5) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<div class="float top">
  (e) Background of page floats is lightblue. This is a top float.
</div>
<div class="float bottom">
  (f) Background of page floats is lightblue. This is a top float.
</div>
<div class="float bottom">
  (g) Background of page floats is lightblue. This is a top float.
</div>
<div class="float top">
  (h) Background of page floats is lightblue. This is a top float.
</div>
<p>(6) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
<div class="float bottom">
  (i) Background of page floats is lightblue. This is a bottom float. This is a bottom float. This is a bottom float.
</div>
<div class="float bottom">
  (j) Background of page floats is lightblue. This is a bottom float. This is a bottom float. This is a bottom float.
</div>
<p>(7) Background of p elements is lightgray. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns. This is normal text inside two columns.</p>
</body>
</html>
